<template>
  <card>
    <template #button>
      <el-button type="primary" plain @click="addArt">添加分类</el-button>
    </template>
    <template #main>
      <el-table :data="artList" style="width: 100%" border>
        <el-table-column label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column label="分类名称" prop="cate_name"> </el-table-column>
        <el-table-column label="分类别名" prop="cate_alias"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-dialog
              title="修改文章分类"
              :visible.sync="editFormVisible"
              width="600px"
            >
              <el-form :model="eidt" :rules="addRules" ref="eidtForm">
                <el-form-item
                  label="分类名称"
                  label-width="80px"
                  prop="cate_name"
                >
                  <el-input
                    v-model="eidt.cate_name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="分类别名"
                  label-width="80px"
                  prop="cate_alias"
                >
                  <el-input
                    v-model="eidt.cate_alias"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="eidtSure">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="添加文章分类"
        :visible.sync="dialogFormVisible"
        width="600px"
        @close="close"
      >
        <el-form :model="form" :rules="addRules" ref="artForm">
          <el-form-item label="分类名称" label-width="80px" prop="cate_name">
            <el-input v-model="form.cate_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分类别名" label-width="80px" prop="cate_alias">
            <el-input v-model="form.cate_alias" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSure">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </card>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { addArtList, delArtList, getIdArtList, eidtIdArtList } from '@/api/art'
export default {
  name: '',
  data () {
    return {
      dialogFormVisible: false,
      editFormVisible: false,
      form: {
        cate_name: '',
        cate_alias: ''
      },
      eidt: {
        id: '',
        cate_name: '',
        cate_alias: ''
      },
      addRules: {
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          {
            pattern: /^\S{1,10}$/,
            message: '分类名称必须是1-10位的非空字符串',
            trigger: 'blur'
          }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '分类别名必须是1-15位的字母数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {},
  computed: {
    ...mapState('article', ['artList'])
  },
  methods: {
    ...mapActions('article', ['getArtList']),
    async handleEdit (index, row) {
      const { data } = await getIdArtList(row.id)
      if (data.code !== 0) return this.$message.error(data.message)
      this.eidt = data.data
      this.editFormVisible = true
    },
    async handleDelete (index, row) {
      if (row.id === 1 || row.id === 2) {
        return this.$message.warning('管理员不允许删除前两个分类！')
      }
      const res = await this.$confirm(
        '此操作将永久删除该分类, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (res === 'confirm') {
        const { data } = await delArtList(row.id)
        if (data.code !== 0) return this.$message.error(data.message)
        this.$message.success(data.message)
        this.getArtList()
      } else {
        return this.$message.info('已取消')
      }
    },
    addArt () {
      this.dialogFormVisible = true
    },
    close () {
      this.$refs.artForm.resetFields()
    },
    addSure () {
      this.$refs.artForm.validate(async (val) => {
        if (!val) return ''
        const { data } = await addArtList(this.form)
        if (data.code !== 0) return this.$message.error(data.message)
        this.$message.success(data.message)
        this.getArtList()
      })
      this.dialogFormVisible = false
    },
    eidtSure () {
      if (this.eidt.id === 1 || this.eidt.id === 2) {
        this.editFormVisible = false
        return this.$message.warning('管理员不允许编辑前两个分类！')
      }
      this.$refs.eidtForm.validate(async (val) => {
        if (!val) return
        const { data } = await eidtIdArtList(this.eidt)
        if (data.code !== 0) return this.$message.error(data.message)
        this.$message.success(data.message)
        this.getArtList()
        this.editFormVisible = false
      })
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
